<template>
  <div class="index">
    <!-- 侧栏 -->
    <div class="sider">
      <!-- 用户信息 -->
      <div class="user">
        <div class="user-avatar" @click="modalTabName = 'user'">
          {{ userInfo.nickName.substring(0, 1) }}
        </div>
        <div class="user-nick">{{ userInfo.nickName }}</div>
        <div class="user-name">{{ userInfo.userName }}</div>
      </div>
      <!-- 导航区域 -->
      <div class="nav">
        <div
          v-for="(item, index) in navList"
          :key="index"
          :class="{
            'nav-item': true,
            'nav-item-active': $route.path == item.route
          }"
          @click="changeRoute(item.route)"
        >
          <div>
            <div>
              <a-icon :type="item.icon" theme="filled" />
            </div>
            <div>{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="main">
      <!-- 头部 -->
      <div class="header">
        <!-- 页面标题 -->
        <div class="page-title">网盘系统</div>
        <!-- 退出登录按钮 -->
        <a-button type="link" @click="handleLogout">退出登录</a-button>
      </div>
      <!-- 内容 -->
      <div class="content">
        <router-view />
      </div>
    </div>
    <!-- 弹出对话框-个人信息 -->
    <a-modal
      :visible="isModalVisible"
      :footer="null"
      width="800px"
      @cancel="modalTabName = ''"
    >
      <div class="modal-title" slot="title">
        <div
          :class="{
            'modal-tab-item': true,
            'tab-item-active': modalTabName == 'user'
          }"
          @click="modalTabName = 'user'"
        >
          个人信息
        </div>
        <div
          :class="{
            'modal-tab-item': true,
            'tab-item-active': modalTabName == 'focus'
          }"
          @click="modalTabName = 'focus'"
        >
          关注用户
        </div>
      </div>
      <user-info v-if="modalTabName == 'user'"></user-info>
      <user-focus v-else-if="modalTabName == 'focus'"></user-focus>
    </a-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import UserInfo from '@/components/user/UserInfo.vue'
import UserFocus from '@/components/user/userFocus.vue'
export default {
  beforeRouteEnter(ro, from, next) {
    next(async (vm) => {
      const res = await vm.$store.dispatch('setUserInfoAsync')
      if (res === false) {
        vm.$router.push('/')
      }
    })
  },
  components: { UserInfo, UserFocus },
  data() {
    return {
      // 导航列表
      navList: [
        {
          title: '文件',
          icon: 'folder-open',
          route: '/files'
        },
        {
          title: '收藏',
          icon: 'shopping',
          route: '/collects'
        },
        {
          title: '分享',
          icon: 'gift',
          route: '/shares'
        },
        {
          title: '回收站',
          icon: 'rest',
          route: '/trashes'
        }
      ],
      // 对话框的tab名
      modalTabName: ''
    }
  },
  computed: {
    ...mapState(['userInfo']),
    // 对话框是否显示
    isModalVisible() {
      return this.modalTabName !== ''
    }
  },
  methods: {
    // 切换路由
    changeRoute(route) {
      if (!(this.$route.path === route)) {
        this.$router.push(route)
      }
    },
    // 退出登录
    handleLogout() {
      this.$utils.removeToken()
      this.$router.push('/login')
    }
  },
  mounted() {
    this.$store.dispatch('setFocusUserListAsync')
  }
}
</script>
<style lang="less" scoped>
.index {
  display: flex;
  height: 100vh;
  color: #666;
  // 侧栏
  .sider {
    width: 300px;
    box-shadow: 5px 0 10px -5px #666;
    overflow: auto;
    background-color: #e6eef3;
    // 用户
    .user {
      height: 300px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      text-align: center;
      user-select: none;
      .user-avatar {
        box-shadow: 0 0 10px -5px #666;
        width: 128px;
        height: 128px;
        border-radius: 50%;
        font-size: 72px;
        line-height: 128px;
        font-weight: bold;
        transition: box-shadow 0.5s, transform 0.5s;
        &:hover {
          box-shadow: 0 5px 20px -10px #666;
          transform: translate(-5px, -5px);
        }
      }
      .user-nick {
        font-size: 24px;
        margin: 12px 0;
        font-weight: bold;
      }
    }
    // 导航
    .nav {
      display: flex;
      flex-wrap: wrap;

      .nav-item {
        width: 50%;
        height: 150px;
        background-color: #e6eef3;
        // border: 1px solid #e6eef3;
        text-align: center;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: box-shadow 0.5s, text-shadow 0.5s, transform 0.5s;
        &:hover {
          border: none;
          box-shadow: 0 5px 20px -10px #666;
          text-shadow: #ccc 1px 1px 2px;
          transform: translate(-5px, -5px);
        }
        .anticon {
          font-size: 48px;
        }
      }
      .nav-item-active {
        background-color: #cfdfe9;
      }
    }
  }

  // 主体
  .main {
    flex: 1;
    height: 100%;
    // 头部
    .header {
      height: 48px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24px;
      box-shadow: 0 5px 10px -5px #666;
      user-select: none;
      background-color: #95b7cd;
      color: #cfdfe9;
      .page-title {
        font-size: 24px;
        font-weight: bold;
      }
      .ant-btn {
        color: #fff;
      }
    }

    // 内容
    .content {
      height: calc(~'100% - 48px');
      padding: 24px;
    }
  }
}
// 弹出框
//学到了，弹出框无论写在哪儿，都是在外面的，不能套在根组件里面
/deep/.ant-modal-header {
  padding: 0;
  .ant-modal-title {
    .modal-title {
      width: 100%;
      .modal-tab-item {
        display: inline-block;
        padding: 0 24px;
        height: 56px;
        line-height: 56px;
        transition: background-color 0.5s;
        user-select: none;
        &:hover {
          background-color: fade(@primary-color, 20%);
        }
      }
      .tab-item-active {
        background-color: fade(@primary-color, 10%);
      }
    }
  }
}
/deep/.ant-modal-body {
  height: 500px;
}
</style>
